<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box query-boxstudent">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <el-row>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">客户类型</div>
              <el-select filterable clearable v-model="queryBox.type">
                <el-option
                  v-for="item in student_type_options"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <!-- <crm-perms-box perms="customer:student:source"> -->
            <div class="depart-box">
              <div class="slect-title">客户来源</div>
              <el-select
                filterable
                clearable
                v-model="queryBox.dataFrom"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in student_data_from_options"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
            </div>
            <!-- </crm-perms-box> -->
          </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">获取方式</div>
              <el-select
                clearable
                v-model="queryBox.dataFromType"
                filterable
                @change="student_parent_type_change"
              >
                <el-option
                  v-for="item in student_data_from_type_options"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">客户进展</div>
              <el-form-item @change="student_progress_change">
                <el-select
                  clearable
                  filterable
                  v-model="queryBox.progress"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in student_progress_options"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                    >{{ item.value }}</el-option
                  >
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4">
            <el-form-item label prop="code">
              <el-input v-model="queryBox.code" placeholder="客户编号">
                <template slot="prepend">客户编号</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label prop="name">
              <el-input v-model="queryBox.name" placeholder="学生名称">
                <template slot="prepend">学生名称</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label prop="school">
              <el-input v-model="queryBox.school" placeholder="学校名称">
                <template slot="prepend">学校名称</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="depart-box">
              <div class="slect-title">创建时间</div>
              <el-date-picker
                v-model="createDate"
                type="daterange"
                :start-placeholder="'开始时间'"
                :end-placeholder="'结束时间'"
                range-separator="至"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-col>
          <el-col :span="7" style="margin-left:3%">
            <div class="depart-box" style="margin-bottom:20px;">
              <div class="slect-title" style="width:150px;">最新跟进时间</div>
              <el-date-picker
                v-model="trackingDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="9">
            <div class="depart-box">
              <div class="slect-title">最新分配时间</div>
              <el-date-picker
                v-model="assignDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-col>
          <el-col :span="6">
            <el-row class="area">
              <el-col :span="4" style="margin-left: 0">
                <span class="city-title">所在地区：</span>
              </el-col>
              <el-col :span="19" style="margin-left:-1px;width: 82%;">
                <el-form-item label prop="area">
                  <el-cascader
                    clearable
                    size="large"
                    :options="options"
                    v-model="selectedOptions"
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="7" style="margin-left:3%">
            <div class="depart-box" style="margin-bottom:20px;">
              <div class="slect-title" style="width:150px;">分中心名称</div>
              <el-autocomplete
                  v-model="branchCenterName"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入内容"
                  @select="handleSelect"
                  clearable
                  :change="handleClearable()"
                ></el-autocomplete>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button
          :label="$t('action.search')"
          type="primary"
          perms="true"
          @click="search"
        />
      </div>
    </div>
    <!--表格内容栏-->
    <div class="btn">
      <Crm-table
        :showBatchDelete="false"
        class="table-width"
        userBranchResourceAssign
        width="400"
        permsSee="OperationSteeringCenter:SteeringDistribution:see"
        :data="pageResult"
        :columns="columns"
        :loading="loading"
        @findPage="findPage"
        @handleSee="handleSee"
      ></Crm-table>
    </div>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmPermsBox from "@/views/Core/Crmpermsbox";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import { regionDataPlus } from "element-china-area-data";
import { isMobile } from "@/utils/validate";
import Cookies from "js-cookie";
import store from "@/store";
export default {
  name: "Student",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch,
    CrmPermsBox
  },
  data() {
    return {
      isShowFlag: 0, //0:初始化部门、人员不显示  1:部门显示 2：人员显示
      checkedPeson: 0,
      selectDisabled: false, //跟进弹窗客户进展状态
      typeDisabled: false,
      size: "small",
      // filters: {
      //   name: ""
      // },
      // 查询条件
      student_data_from_options: [
        {
          label: " ",
          key: " "
        }
      ],
      student_type_options: [],
      student_progress_options: [
        {
          label: " ",
          key: " "
        }
      ],
      student_data_from_type_options: [
        {
          label: " ",
          key: " "
        }
      ],
      gradeCache: "",
      isopen: [
        {
          value: "解锁",
          label: "2"
        },
        {
          value: "锁定",
          label: "1"
        }
      ],
      student_import_department: [],
      queryBox: {
        name: "",
        dataFrom: "",
        type: "",
        dataFromType: "",
        progress: "",
        code: "",
        phone: "",
        school: "",
        providerTeacher: "",
        provider_agent: "",
        createDate: "",
        moveDate: "",
        belongToPerson: "",
        pageNum: 0,
        pageSize: 0,
        importDepartment: "",
        belongTo: "",
        phone: "",
        grade: "",
        equipment: "",
        source: "",
        pageAddress: "",
        keyWords: "",
        dataFromGroupKey: "",
        isTmkContacted: ""
      },
      assignDate: "",
      gradeCache: "",
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "belongTo", label: "分中心名称", minWidth: 100 },
        { prop: "name", label: "学生姓名", minWidth: 120 },
        { prop: "grade", label: "所在年级", minWidth: 120 },
        { prop: "subject", label: "科目", minWidth: 120 },
        {
          prop: "laiyuan",
          label: "客户来源",
          minWidth: 100,
          // id: "customerSource"
        },
        { prop: "getType", label: "获取方式", minWidth: 120 },
        { prop: "type", label: "客户类型", minWidth: 100 },
        { prop: "createDate", label: "创建时间", minWidth: 140 },
        {
          prop: "assignDate",
          sortable: "true",
          label: "最新分配时间",
          minWidth: 140
        },
        { prop: "trackingDate", label: "最新跟进时间", minWidth: 140 },
        { prop: "trackingNum", label: "跟进次数", minWidth: 70 },
        { prop: "getprogress", label: "客户进展", minWidth: 120 },
        // { prop: "school", label: "学校名称", minWidth: 120 },
        { prop: "diqu", label: "地区", minWidth: 190 },
        { prop: "code", label: "客户编号", minWidth: 150 }
      ],

      grade_cache_gradeOptions: [],

      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      saveData: {
        customerType: "",
        contractDate: "",
        customerProgress: "",
        contractContent: "",
        nextContractDate: "",
        contactPeople: "",
        contractType: "",
        contractResult: "",
        studentId: this.$route.query.id,
        phoneAdress: "", //手机号码归属地
        source: "",
        importDepartment: "",
        sparePhoneAdress: "",
        grade: "",
        isTmkContacted: ""
      },

      // 客户跟进数据
      stuqueryTrackingData: {
        content: []
      },
      pageRequest2: {
        pageNum: 1,
        pageSize: 10
      },
      studentSubject:[],
       //   地区
      options: regionDataPlus,
      selectedOptions: [],
      trackingDate:[],
      createDate:[],
      loading:false,
      branchCenterName: "",
    };
  },
  methods: {
    // 搜索
    search() {
      this.loading = true;
      this.queryBox.createDateStart = this.createDate[0];
      this.queryBox.createDateEnd = this.createDate[1];
      this.queryBox.trackingDateStart = this.trackingDate[0];
      this.queryBox.trackingDateEnd = this.trackingDate[1];
      this.queryBox.province = this.selectedOptions[0];
      this.queryBox.city = this.selectedOptions[1];
      this.queryBox.area = this.selectedOptions[2];
      this.pageRequest.pageNum = 1;
      if (this.assignDate != null) {
        this.queryBox.assignDateStart = this.assignDate[0];
        this.queryBox.assignDateEnd = this.assignDate[1];
      } else {
        this.queryBox.assignDateStart = "";
        this.queryBox.assignDateEnd = "";
      }

      this.findPage(null);
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;

      this.$api.student
        .userBranchResourceAssign(this.queryBox)
        .then(res => {
          if (res.result == 2) {
            this.$message({
              message: res.msg,
              type: "error"
            });
          } else {
            let content = {
              content: res.listStudentInfo,
              totalSize: res.total
            };
            this.pageResult = content;
            this.pageResult.content.forEach(item => {
              if (item.province == null || item.province == "null") {
                item.diqu = "";
              } else if (
                (item.province != null && item.city == null) ||
                (item.province != "null" && item.city == "null")
              ) {
                item.diqu = CodeToText[item.province];
              } else if (
                (item.province != null &&
                  item.city != null &&
                  item.area == null) ||
                (item.province != "null" &&
                  item.city != "null" &&
                  item.area == "null")
              ) {
                item.diqu = CodeToText[item.province] + CodeToText[item.city];
              } else if (
                (item.province != null &&
                  item.city != null &&
                  item.area != null) ||
                (item.province != "null" &&
                  item.city != "null" &&
                  item.area != "null")
              ) {
                item.diqu =
                  CodeToText[item.province] +
                  CodeToText[item.city] +
                  CodeToText[item.area];
              }
              // 客户来源对应
              this.student_data_from_options.forEach(type_item => {
                if (type_item.key == item.dataFrom) {
                  item.laiyuan = type_item.value;
                }
              });
              // 客户进展对应
              this.student_progress_options.forEach(progress_item => {
                if (progress_item.key == item.progress) {
                  item.getprogress = progress_item.value;
                }
              });
              // 获取方式对应
              this.student_data_from_type_options.forEach(
                data_from_type_item => {
                  if (data_from_type_item.key == item.dataFromType) {
                    item.getType = data_from_type_item.value;
                  }
                }
              ),
                // 客户类型
                this.student_type_options.forEach(student_type_item => {
                  if (student_type_item.key == item.type) {
                    item.type = student_type_item.value;
                    item.customerType = student_type_item.key;
                  }
                });
              //年级
              this.grade_cache_gradeOptions.forEach(gradeItem => {
                if (gradeItem.fId == item.grade) {
                  item.grade = gradeItem.fGradeName;
                }
              });
              // 学科
              this.studentSubject.forEach(subItem => {
                if (subItem.fId == item.subject) {
                  item.subject = subItem.fSpecialtyName;
                }
              });
            });
            this.loading = false;
          }
        })
        .then(data != null ? data.callback : "");
    },

    // 重置
    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.$refs.queryBox.resetFields();
      this.createDate = "";
      this.queryBox.type = "";
      this.queryBox.dataFrom = "";
      this.queryBox.progress = "";
      this.queryBox.provider_agent = "";
      this.queryBox.dataFromType = "";
      this.queryBox.createDateStart = "";
      this.queryBox.createDateEnd = "";
      this.queryBox.trackingDateStart = "";
      this.queryBox.trackingDateEnd = "";
      this.queryBox.importDepartment = "";
      this.queryBox.isLock = "";
      this.queryBox.trackingNum = "";
      this.userName = "";
      this.branchCenterName = "";
      this.trackingDate = "";
      this.queryBox.belongTo = "";
      this.selectedOptions = [];
      this.queryBox.province = "";
      this.queryBox.city = "";
      this.queryBox.area = "";
      this.pageRequest.pageNum = 1;
      this.userDerpatName = "";
      this.queryBox.phone = "";
      this.queryBox.grade = "";
      this.queryBox.departmentId = "";
      this.queryBox.equipment = "";
      this.queryBox.source = "";
      this.queryBox.pageAddress = "";
      this.queryBox.keyWords = ""; //网推分主题查询
      this.assignDate = "";
      this.queryBox.assignDateStart = "";
      this.queryBox.assignDateEnd = "";
      this.queryBox.subject = "";
      this.queryBox.isTmkContacted=''
      this.loading=true
      this.queryBox.dataFromGroupKey = "";
      this.findPage(null);
    },

    // 获取来源
    get_student_data_from() {
      this.student_data_from_options = JSON.parse(
        localStorage.getItem("studentSource")
      );
    },
    // 获取进展
    get_student_progress() {
      this.student_progress_options = JSON.parse(
        localStorage.getItem("studenProgress")
      );
    },
    student_progress_change(value) {
      this.queryBox.student_progressValue = value.toString();
    },
    // 获取OEM卡类型
    get_oemType() {
      this.oemType = JSON.parse(localStorage.getItem("oemType"));
    },
    // 获取导入部门
    get_student_importDepartment() {
      this.$api.user
        .optionsList({ codeType: "student_import_department" })
        .then(res => {
          this.student_import_department = res.keyValueList;
        });
    },
    // 获取部门数据
    get_dept_data() {
      this.$api.dropdown.deptLevel3({ deptType: 1 }).then(res => {
        this.tableData = res.departmentInfoList;
        this.deptData = res.departmentInfoList;
        this.date = res.departmentInfoList;
        this.date.forEach(item => {
          item.text = item.deptName;
          item.value = item.deptName;
        });
      });
    },

    // 客户类型
    get_student_type() {
      this.student_type_options = JSON.parse(
        localStorage.getItem("stdentTpye")
      );
    },
    // 获取方式
    get_student_data_from_type() {
      this.student_data_from_type_options = JSON.parse(
        localStorage.getItem("stdentDataFromType")
      );
      // this.subject_Options = JSON.parse(
      //   localStorage.getItem("studentSubject")
      // );
      this.studentSubject = JSON.parse(
        localStorage.getItem("studentSubject")
      );
    },
    student_parent_type_change(value) {
      this.info.studentInfoDetail.studentInfoAttr.parentType = value.toString();
    },
    // 获取销售姓名
    get_sale_name() {
      this.$api.dropdown.users({ userType: 3 }).then(res => {
        this.belongTo = res.userInfoList;
      });
    },
    // 查看客户档案
    handleSee: function(params) {
      this.dataForm = Object.assign({}, params.row);
      this.$router.push({
        path: "/Customerfile/Student",
        query: {
          id: this.dataForm.id
        }
      });
    },

    // 获取时间
    dateFormat: function(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },

    // 点击客户类型
    typeChange() {
      if (this.saveData.customerType == 5) {
        this.saveData.customerProgress = "8";
      }
    },

    // 点击客户进展
    progressChange() {
      if (this.saveData.customerProgress == 8) {
        this.saveData.customerType = "5";
      }
    },

    // 获取跟进时候的客户进展
    get_track_progress() {
      this.student_progress_options2 = JSON.parse(
        localStorage.getItem("studenProgress2")
      );
    },
    // 获取跟进客户类型
    get_student_track_type() {
      this.student_tracktype_options = JSON.parse(
        localStorage.getItem("stdentTpye")
      );
    },
    // 获取分中心
    get_branchcenter() {
      this.$api.dropdown.branchcenter().then(res => {
        this.branchcenter = res.branchCenterInfoList;
      });
    },

   
    // 获取年级
    get_grade_cache() {
      this.grade_cache_gradeOptions = JSON.parse(
        localStorage.getItem("gradeCache")
      );
    },
     // 分中心远程搜索
    querySearchAsync(queryString, callback) {
      let restaurants = [{}];
      let results = "";
      this.$api.dropdown.branchcenter().then(res => {
        for (let i of res.branchCenterInfoList) {
          i.value = i.name; //将想要展示的数据作为value
        }
        restaurants = res.branchCenterInfoList;
        results = queryString
          ? restaurants.filter(this.createFilter(queryString))
          : restaurants;
        callback(results);
      });
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    // 搜索所属分中心
    handleSelect(item) {
      this.queryBox.belongTo = item.id;
    },
    handleClearable(value) {
      if (this.userName == "") {
        this.queryBox.belongTo = "";
      }
      if (this.userDerpatName == "") {
        this.queryBox.departmentId = "";
      }
      if (this.branchCenterName == "") {
        this.queryBox.providerAgent = "";
      }
    },
  },
  mounted() {
    this.get_student_data_from();
    this.get_student_progress();
    this.get_dept_data();
    this.get_student_type();
    this.get_student_data_from_type();
    this.get_sale_name();
    this.get_oemType();
    this.get_student_importDepartment();
    this.get_grade_cache();
    this.get_track_progress();
    this.get_student_track_type();
    this.get_branchcenter();
  }
};
</script>
<style lang="scss" scoped>
.second-contain-box {
  width: 95%;
  margin: 0 auto;
  .el-col {
    text-align: left;
    margin: 4px 0;
  }
  .el-row {
    margin: 0 0 !important;
  }
  .el-col i {
    font-style: normal;
    display: inline-block;
    margin-top: 10%;
  }
}

.checked-person {
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.demo-form-inline {
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input {
    width: 93% !important;
  }
  .el-select {
    width: 100% !important;
  }
  .tit {
    display: inline-block;
    margin-top: 10%;
  }
}
.el-dialog__wrapper .el-form-item__content {
  margin-left: 0;
}
.el-row .el-col {
  margin-left: 0;
}
.query-box .slect-title,
.query-box .city-title {
  font-weight: bold !important;
}
</style>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss">
.batchdistribution-pop .el-dialog__header {
  padding: 0 0 0 0 !important;
}
.batchdistribution-pop .el-autocomplete {
  width: 100% !important;
}
.query-boxstudent .el-input-group__prepend {
  font-weight: bold !important;
}
.stu-pop .el-select {
  width: 100%;
}
</style>
